<template>
   <!-- <ElCollapse v-if="active === 'property'" v-model="activeItems">
    <ElCollapseItem title="基本信息" name="base">
      <el-form :model="data" label-width="auto">
        <el-form-item label="名称">
          <el-input :model-value="name" disabled />
        </el-form-item>
        <el-form-item label="标签">
          <el-input v-model="data.label" />
        </el-form-item>
        <el-form-item label="注释">
          <el-input type="textarea" v-model="data.comment" />
        </el-form-item>
      </el-form>
    </ElCollapseItem>
    <ElCollapseItem title="图标信息" name="icon">
      <el-form :model="data" label-width="auto">
        <el-form-item label="图标">
          <el-input v-model="data.icon" />
        </el-form-item>
        <el-form-item label="颜色">
          <el-input v-model="data.color" />
        </el-form-item>
        <el-form-item label="尺寸">
          <el-input v-model="data.size" />
        </el-form-item>
        <el-form-item label="HOVER颜色">
          <el-input v-model="data.hoverColor" />
        </el-form-item>
      </el-form>
    </ElCollapseItem>
  </ElCollapse> -->
  <div v-if="active === 'property'">
    <ElDescriptions :column="column" border>
      <ElDescriptionsItem label="名称">{{ name }}</ElDescriptionsItem>
      <ElDescriptionsItem label="标签">
        <el-input v-model="data.label" />
      </ElDescriptionsItem>
      <ElDescriptionsItem label="注释" prop="comment" :span="column">
        <el-input type="textarea" v-model="currentApp.comment" />
      </ElDescriptionsItem>  
      <ElDescriptionsItem label="使用库" prop="libs" :span="column">
        <el-select v-model="data.libs" multiple>
          <el-option label="<无>" value="" />
        </el-select>
      </ElDescriptionsItem>
      <ElDescriptionsItem label="图标">
        <el-input v-model="data.icon" />
      </ElDescriptionsItem>
      <ElDescriptionsItem label="颜色">
        <el-input v-model="data.color" />
      </ElDescriptionsItem>
      <ElDescriptionsItem label="尺寸">
        <el-input v-model="data.size" />
      </ElDescriptionsItem>
      <ElDescriptionsItem label="HOVER颜色">
        <el-input v-model="data.hoverColor" />
      </ElDescriptionsItem>
    </ElDescriptions>
    <!-- <div class="bg-green flex items-center h30px pl5px color-#FFF mt10px">数据库连接信息</div>
    <DatasourceEditor v-model="data.datasource" /> -->
    <!-- <ElDescriptions :column="column" border>
      <ElDescriptionsItem label="驱动类" prop="driverClassName">
        <el-input v-model="datasource.driverClassName" />
      </ElDescriptionsItem>
      <ElDescriptionsItem label="类型" prop="type">
        <el-input v-model="datasource.type" />
      </ElDescriptionsItem>
      <ElDescriptionsItem label="连接地址" prop="url" :span="column">
        <el-input v-model="datasource.url" />
      </ElDescriptionsItem>
      <ElDescriptionsItem label="用户名" prop="username">
        <el-input v-model="datasource.username" />
      </ElDescriptionsItem>
      <ElDescriptionsItem label="密码" prop="password">
        <el-input type="password" v-model="datasource.password" />
      </ElDescriptionsItem>
    </ElDescriptions> -->
  </div>
  <ComponentEditor v-if="active === 'component'" type="layout" v-model:component="data.component" v-model:component-props="data.componentProps" />
  <LayoutEditor v-if="active === 'layout'" v-model="data.layout" />
</template>
<script lang="ts" setup>
  import { active, currentApp } from '@/views/seed-dev'
  import { ref, watch } from 'vue';
  import { save } from '..';
  import { ElDescriptions, ElDescriptionsItem, ElInput, ElSelect, ElOption } from 'element-plus';
  import { ComponentEditor } from '../../ComponentEditor';
  import { LayoutEditor } from '../../LayoutEditor';
  import { DatasourceEditor } from '../../DatasourceEditor';
  import { DatasourceConfiguration, MicroConfiguration } from '@/views/dev-types';

  const column = 2
  const datasource = ref<DatasourceConfiguration>({})

  const props = defineProps<{microName: string}>()

  function getInitData() {
    if(!props.microName) return {}

    return currentApp.value.micros?.[props.microName] || {}
  }

  const name = ref<string>(props.microName)
  const data = ref<MicroConfiguration>(getInitData())

  watch(() => data.value, () => save(name.value, data.value), { deep: true })
</script>